import React, { Component } from 'react';
import { Message, Dialog, Button, Form, Input, Field, Tree, Select } from '@alifd/next';
import axios from 'axios';
import { insert, roleMenus, auth } from '../../../../api/Role';
import { menus } from '../../../../api/Menu';
import { Forest } from '../../../../libs/Tree';
import '../RoleTable.scss';
import eventProxy from '../../../../libs/eventProxy';
import IceContainer from '@icedesign/container/lib/IceContainer';

const FormItem = Form.Item;

export default class AuthDialog extends Component {
  static displayName = 'AuthDialog';

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      alls: [],
      auths: [],
    };
    this.field = new Field(this);
  }


  dataToTree= (dataSource) => {
    const forest = new Forest();
    dataSource.forEach((menu) => {
      forest.init({
        id: menu.id,
        pid: menu.parentId,
        key: `${menu.id}`,
        label: menu.name,
        children: [],
      });
    });
    return forest.roots;
  }
  handleSubmit = () => {
    const values = new URLSearchParams();
    const checkIds = this.state.auths.join(',');
    values.append('roleId', this.props.record.id);
    values.append('menuIds', checkIds);
    auth(values).then((response) => {
      const data = response.data;
      if (data.code === 200) {
        Message.success('操作成功');
        this.setState({
          visible: false,
        });
      }
    });
  };

  onOpen = () => {
    const roleId = this.props.record.id;
    const that = this;
    axios.all([menus(), roleMenus({ id: roleId })])
      .then(axios.spread(function (res1, res2) {
        const list1 = res1.data.data;
        const list2 = res2.data.data;
        const source = that.dataToTree(list1);
        const authMenus = [];
        if (list2 !== null) {
          list2.forEach((ele) => {
            authMenus.push(`${ele.menuId}`);
          });
        }
        that.setState({
          alls: source,
          auths: authMenus,
          visible: true,
        });
      }));
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onCheck = (values) => {
    this.setState({
      auths: values,
    });
  }

  render() {
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const isFullScreen = true;
    const showLine = true;
    const checkStrictly = true;
    return (
      <div style={styles.editDialog}>
        <Button type="primary" size="small" onClick={this.onOpen}>
        角色授权
        </Button>
        <Dialog
          isFullScreen={isFullScreen}
          style={{ width: 640 }}
          visible={this.state.visible}
          onOk={this.handleSubmit}
          closeable="esc,mask,close"
          onCancel={this.onClose}
          onClose={this.onClose}
          title="授权"
        >
          <div style={{ padding: '10px', background: '#ddd'}}>
            <IceContainer>
              <Tree
                checkable
                showLine={showLine}
                checkStrictly={checkStrictly}
                checkedKeys={this.state.auths}
                defaultExpandedKeys={this.state.auths}
                dataSource={this.state.alls}
                onCheck={this.onCheck}
              />
            </IceContainer>
          </div>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  editDialog: {
    display: 'inline-block',
    marginRight: '5px',
  },
};
